<template>
  <div class="register-container">
    <div class="register-box">
      <h3 class="register-title">添加新用户</h3>
      <el-form :model="registerForm" ref="registerFormRef" label-width="120px">
        <el-form-item label="登录名" prop="username" :rules="[{ required: true, message: '请输入登录名', trigger: 'blur' }]">
          <el-input type="text" v-model="registerForm.username" size="small"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <el-input type="password" v-model="registerForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword" :rules="[
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ]">
          <el-input type="password" v-model="registerForm.confirmPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="nickname" :rules="[{ required: true, message: '请输入真实姓名', trigger: 'blur' }]">
          <el-input type="text" v-model="registerForm.nickname" size="small"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex" :rules="[{ required: true, message: '请选择性别', trigger: 'blur' }]">
          <el-select v-model="registerForm.sex" placeholder="请选择性别" size="small">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :rules="[
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
        ]">
          <el-input type="email" v-model="registerForm.email" size="small"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phoneNumber" :rules="[
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的电话号码', trigger: 'blur' }
        ]">
          <el-input type="text" v-model="registerForm.phoneNumber" size="small"></el-input>
        </el-form-item>
        <el-form-item label="系统角色" prop="roleId" :rules="[{ required: true, message: '请选择系统角色', trigger: 'blur' }]">
          <el-select v-model="registerForm.roleId" placeholder="请选择系统角色" size="small">
            <el-option label="健康管家" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="register-button" type="primary" @click="register">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import router from "@/util/router";
import http from '@/axios/http';

const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  nickname: '',
  sex: null,
  email: '',
  phoneNumber: '',
  roleId: null
});
const registerFormRef = ref(null); // 用于表单验证
const errorMsg = ref(''); // 使用 ref 创建响应式变量

// 验证两次密码是否一致
function validatePassword(rule, value, callback) {
  if (value !== registerForm.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
}

// 注册逻辑
function register() {
  // 验证表单
  registerFormRef.value.validate((valid) => {
    if (!valid) {
      return; // 如果验证不通过，直接返回
    }

    const registerData = {
      username: registerForm.username,
      password: registerForm.password,
      nickname: registerForm.nickname,
      sex: registerForm.sex,
      email: registerForm.email,
      phoneNumber: registerForm.phoneNumber,
      roleId: registerForm.roleId
    };

    http.post('/lyy/register', registerData).then((res) => {
      let result = res.data; // 处理器返还的结果数据

      if (result.result === "success") { // 返还标志是 "success"
        router.push('/UserManage');
      } else {
        errorMsg.value = result.error || "注册失败，请稍后再试";
      }
    }).catch((error) => {
      console.error("注册请求失败", error);
      errorMsg.value = "注册请求失败，请稍后再试";
    });
  });
}

</script>
<style scoped>

.register-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
  margin-top: 10px;
}
</style>